<!--
   name:服务费账单
   time:2021-10-22
   by:Mr_wu
-->

<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!--    筛选区    -->
            <div class="filter f f-a-c">
                <el-date-picker size="mini" type="datetimerange" unlink-panels v-model="dateArr"
                                @change="filterChange" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00','23:59:00']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <el-input class="search-group mar-left-20" placeholder="请输入账单编号进行搜索" @keyup.enter.native="filterChange" size="mini" v-model="keyword">
                    <el-button slot="append" @click="filterChange">搜索</el-button>
                </el-input>
            </div>
            <!--    表格    -->
            <el-table class="th-bg mar-top-20"
                      :data="lists"
                      ref="elTable"
                      :row-key="getRowKeys"
                      @selection-change="selectChange"
                      v-loading="$store.state.tableLoad"
                      element-loading-text="加载中"
                      element-loading-spinner="el-icon-loading">
                <el-table-column
                        :reserve-selection="true"
                        v-if="showSelect"
                        type="selection"
                        :selectable="selectFunc"
                        width="55">
                </el-table-column>
                <el-table-column label="序号" prop="name" width="70">
                    <template slot-scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账单号" prop="billCode" width="200"></el-table-column>
                <el-table-column label="账单时间" prop="addTime" width="200"></el-table-column>
                <el-table-column label="设备数量(台)" prop="macNum"></el-table-column>
                <el-table-column label="续费总时长(月)" prop="renewMonths"></el-table-column>
                <el-table-column label="续费总金额(元)" prop="renewMoney"></el-table-column>
                <el-table-column label="支付方式" prop="addTime">
                    <template slot-scope="scope">
                        <span v-if="scope.row.payType ==1">微信支付</span>
                        <span v-if="scope.row.payType ==2">支付宝支付</span>
                        <span v-if="scope.row.payType ==3">系统支付</span>
                    </template>
                </el-table-column>
                <el-table-column label="开票状态" prop="addTime">
                    <template slot-scope="scope">
                        <span v-if="scope.row.receiptStatus == 0" style="color:red;">未开票</span>
                        <span v-if="scope.row.receiptStatus == 1">已申请</span>
                        <span v-if="scope.row.receiptStatus == 2" style="color: #67C23A">已开票</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="addTime" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" style="color: red" v-if="scope.row.billStatus == 0" @click="cancelBill(scope.row.id)">取消账单</el-button>
                        <el-button type="text" @click="goView(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mar-top-20">
                <span style="font-weight: bold">总金额：<span style="color:#3487E8 ">{{totalMoney}}</span>元</span>
            </div>
            <div class="f f-a-c f-j-b mar-top-20">
                <div>
                    <el-tooltip class="item" effect="dark" :content="showSelect ?'关闭列表勾选':'开启列表勾选'" placement="top-start">
                        <el-button type="primary" @click="showSelect = !showSelect">
                            <span v-if="!showSelect">申请开票</span>
                            <span v-else>取消</span>
                        </el-button>
                    </el-tooltip>
                    <el-button type="success" v-if="showSelect" @click="openInvoiceFunc">确定</el-button>
                </div>
                <el-pagination
                        style="margin-top:0"
                        background
                        :page-size="pageSize"
                        :current-page="page"
                        :total="total"
                        :layout="$tmp.PAGE_LAYOUT"
                        @current-change="changePage">
                </el-pagination>
            </div>
            <div class="tips mar-top-20" v-if="showSelect">*勾选列表数据，进行批量操作，只能申请未开票账单</div>
        </div>
        <!--   开发票弹窗   -->
        <el-dialog
                :append-to-body="true"
                title="开票信息"
                :visible.sync="invoicePop"
                width="50%"
                center>
            <div class="f f-j-c">
                <div>
                    <el-radio v-model="invoiceInfo.receiptType" label="0" border>普通发票</el-radio>
                    <el-radio v-model="invoiceInfo.receiptType" label="1" border>增值税专用发票</el-radio>
                </div>
            </div>
            <div class='f f-j-c pop'>
                <div v-if="invoiceInfo.receiptType == 0">
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人名称:</div>
                        <el-input size="mini" v-model="invoiceInfo.taxpayer"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人识别码:</div>
                        <el-input size="mini" v-model="invoiceInfo.taxpayerCode"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">接收发票邮箱:</div>
                        <el-input size="mini" v-model="invoiceInfo1.receiverEmail"></el-input>
                    </div>
                </div>
                <div v-else>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人名称:</div>
                        <el-input size="mini" v-model="invoiceInfo.taxpayer"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人识别码:</div>
                        <el-input size="mini" v-model="invoiceInfo.taxpayerCode"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人地址:</div>
                        <el-input size="mini" v-model="invoiceInfo2.taxpayerAddress"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人电话:</div>
                        <el-input size="mini" v-model="invoiceInfo2.taxpayerPhone"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人开户行:</div>
                        <el-input size="mini" v-model="invoiceInfo2.taxpayerBank"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">纳税人银行账号:</div>
                        <el-input size="mini" v-model="invoiceInfo2.taxpayerCard"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">收件人姓名:</div>
                        <el-input size="mini" v-model="invoiceInfo2.receiverName"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">收件人电话:</div>
                        <el-input size="mini" v-model="invoiceInfo2.receiverPhone"></el-input>
                    </div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name f-s-0">收件人地址:</div>
                        <el-input size="mini" v-model="invoiceInfo2.receiverAddress"></el-input>
                    </div>
                </div>
            </div>
            <div class="f f-j-c mar-top-20">
                <div class="tips" v-text="invoiceInfo.receiptType == 0 ? content[0]:content[1]"></div>
            </div>
            <div class="f f-j-c">
                <el-button type="primary" style="width: 70%;margin-top: 20px;" @click="confirmInvoice">确认提交</el-button>
            </div>
        </el-dialog>
        <!--拉起提示弹窗-->
        <succ-Popup :controlPop="invoiceSubmitPop" @close="receiveClose" :contentPop="`开票申请已提交`" ></succ-Popup>
    </div>
</template>

<script>
    import succPopup from './components/successPopup'
    export default {
        name: "expenseBill",
        data(){
            return{
                lists:[],
                dateArr:[],
                keyword:'',
                page:1,
                pageSize:10,
                total:0,
                showSelect:false,
                invoicePop:false,//开发票弹窗
                invoiceType:'1',//发票种类
                content:['备注：开个人普通发票请提供姓名和身份证号；开公司普通发票请提供公司名称和纳税人识别号。普通发票均为电子发票，请知悉！','备注：增值税专用发票均为纸质发票，需邮寄，且快递费到付，请谅解！'],
                invoiceSubmitPop:false,//发票提交后的弹窗
                totalMoney:0,//总金额
                invoiceInfo:{//发票的公共信息
                    "billIds":'',// 账单列表id 多个用逗号隔开
                    "receiptType":'0',//发票类型 0 普通发票 1 增值税专用发票
                    "taxpayer":'',//纳税人名称
                    "taxpayerCode":'',//纳税人识别码
                },
                invoiceInfo1:{//普通发票信息
                    "receiverEmail":'',//接收发票邮箱
                },
                invoiceInfo2:{//增值税发票信息
                    "taxpayerAddress":'',//纳税人地址
                    "taxpayerPhone":'',//纳税人电话
                    "taxpayerBank":'',//纳税人开户行
                    "taxpayerCard":'',//纳税人银行账号
                    "receiverName":'',//收件人姓名
                    "receiverPhone":'',//收件人电话
                    "receiverAddress":'',//收件人地址
                },
            }
        },
        components:{succPopup},
        created() {
            this.dateArr.push(this.$getDate('s')+' '+'00:00:00');
            this.dateArr.push(this.$getDate('e')+' '+'23:59:59');
            this.getList();
        },
        methods:{

            //取消账单
            cancelBill(id){
                this.$confirm('此操作将取消该账单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url:'/api/serviceFee/cancelBill',
                        method: 'get',
                        data:{
                            billId:id
                        },
                    }).then(res=>{
                        this.$message.success('取消成功');
                        this.getList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },

            //发票提交
            confirmInvoice(){
                let postData = this.invoiceInfo.receiptType == 0 ? {...this.invoiceInfo,...this.invoiceInfo1} : {...this.invoiceInfo,...this.invoiceInfo2};
                try {
                    this.$formCheck.checkEmpty(postData);
                    this.$http({
                        url:"/api/serviceFee/createReceipt",
                        contentType:"JSON",
                        data:postData
                    }).then(res=>{
                        this.invoicePop = false;
                        this.invoiceSubmitPop = true;
                        //清除勾选状态
                        this.$refs.elTable.clearSelection();
                    })
                }catch (e) {

                }
            },

            //打开开发票弹窗
            openInvoiceFunc(){
                if(this.invoiceInfo.billIds === ''){
                    return this.$message.warning('请勾选数据');
                }
                this.invoicePop = true;
            },

            //分页
            changePage(val){
                this.page = val;
                this.getList();
            },

            // 确定唯一的key值
            getRowKeys(row) {
                return row.id; // 每条数据的唯一识别值
            },

            //勾选禁用状态
            selectFunc(row,index){
               return row.receiptStatus == 0 ? true:false;
            },

            //查看
            goView(id){
                this.$router.push({name:'billDetail',query:{
                        id
                    }});
            },

            //筛选事件
            filterChange(){
                this.page = 1;
                this.getList();
            },

            //接收子组件值--关闭弹窗
            receiveClose(val){
                this.invoiceSubmitPop = val;
            },

            //列表勾选事件
            selectChange(e){
                let arr = [];
                e.forEach((item,index)=>{
                    arr.push(item.id);
                })
                // if(arr.length != 0){
                //     this.ischeck = true;
                // }else{
                //     this.ischeck = false;
                // }
                this.invoiceInfo.billIds = arr.join(',');
            },

            getList(){
                this.$http({
                    url:'/api/serviceFee/getBillList',
                    isLoading:'actual',
                    method: 'get',
                    data:{
                        startTime: this.dateArr ? this.dateArr[0]:'',
                        endTime:this.dateArr ? this.dateArr[1]:'',
                        billCode:this.keyword,
                        page:this.page,
                        limit:this.pageSize
                    },
                    contentType: 'form'
                }).then(res=>{
                    this.total = res.count;
                    this.lists = res.data;
                    //账单总金额
                    this.$http({
                        url:'/api/serviceFee/getTotalMoney',
                        method: 'get',
                        data:{
                            startTime:this.dateArr[0],
                            endTime:this.dateArr[1],
                            keyword:this.keyword,
                            receiptStatus:this.invoiceValue,
                        }
                    }).then(re=>{
                        this.totalMoney = re.data;
                    })
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .tips{
        color: red;
    }
    .pop{
        .group-one{
            margin-top: 10px;
            &:first-child{
                margin-top: 40px;
            }
            /*&:last-child{*/
            /*    margin-top: 30px;*/
            /*    font-size: 16px;*/
            /*}*/
        }
        .pop-name{
            width: 110px;
            text-align: right;
            margin-right: 20px;
            font-weight: bold;
        }
        .pop-body{
            width: 100px;
        }
    }
</style>
